<!DOCTYPE HTML>
<html id="ng-app" ng-app="app"> <!-- id="ng-app" IE<8 -->
    <head>
        <title>Without bootstrap example</title>
        <link rel="stylesheet" href="style.css" />

        <!-- ES5 shim for old browsers -->
        <script src="http://nervgh.github.io/js/es5-shim.min.js"></script>
        <script src="http://nervgh.github.io/js/es5-sham.min.js"></script>
        <!--<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>-->
        <script src="../console-sham.js"></script>

        <script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
        <script src="../../angular-file-upload.js"></script>
        <script src="controllers.js"></script>

        <!--thumbnails for images-->
        <script src="directives.js"></script>
    </head>

    <!-- Example: nv-file-drop="" uploader="{Object}" options="{Object}" filters="{String}" -->
    <body ng-controller="AppController" nv-file-drop="" uploader="uploader">

        <h1>Without bootstrap example</h1>

        <h2>Examples</h2>
        <ul>
            <li><a href="../simple">Simple example</a></li>
            <li><a href="../image-preview">Uploads only images (with canvas preview)</a></li>
            <li><a href="#">Without bootstrap</a></li>
        </ul>
        <a href="https://github.com/nervgh/angular-file-upload">Download / Repository</a>
        <br />
        <br />

        <!-- 3. nv-file-over uploader="link" over-class="className" -->
        <div ng-show="uploader.isHTML5">
            <div class="over-zone zone" nv-file-over="" uploader="uploader" style="float: left;">
                Base drop zone indication
            </div>
            <!-- Example: ng-file-drop | ng-file-drop="options" -->
            <div nv-file-drop="" nv-file-over="" uploader="uploader" options="{url: '/foo'}" over-class="other-over-zone" class="other-drop-zone zone" style="float: right;">
                One more drop zone with its own settings (and indication)
            </div>
            <div style="clear: both;"></div>
        </div>

        <br />

        <!-- Example: nv-file-select="" uploader="{Object}" options="{Object}" filters="{String}" -->
        <input type="file" nv-file-select="" uploader="uploader" multiple />

        <h2>The queue. Length: {{ uploader.queue.length }}</h2>
        <ul>
            <li ng-repeat="item in uploader.queue">
                <div>Name: {{ item.file.name }}</div>
                <div>Size: {{ item.file.size/1024/1024|number:2 }} Mb</div>
                <div ng-show="uploader.isHTML5">
                    Progress: {{ item.progress }}
                    <div class="item-progress-box">
                        <div class="item-progress" ng-style="{ 'width': item.progress + '%' }"></div>
                    </div>
                </div>
                <div ng-if="controller.isImage(item._file)">
                    Thumbnail (only images):
                        <!-- Image preview -->
                        <!--auto height-->
                        <!--<div ng-thumb="{ file: item.file, width: 100 }"></div>-->
                        <!--auto width-->
                        <div ng-thumb="{ file: item._file, height: 100 }"></div>
                        <!--fixed width and height -->
                        <!--<div ng-thumb="{ file: item.file, width: 100, height: 100 }"></div>-->
                </div>
                <div>
                    <button ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">Upload</button>
                    <button ng-click="item.cancel()" ng-disabled="!item.isUploading">Cancel</button>
                    <button ng-click="item.remove()">Remove</button>
                </div>
            </li>
        </ul>
        <div>
            <div>
                Total progress: {{ uploader.progress }}
                <div class="total-progress-box">
                    <div class="total-progress" ng-style="{ 'width': uploader.progress + '%' }"></div>
                </div>
            </div>
            <button ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">Upload all</button>
            <button ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">Cancel all</button>
            <button ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">Remove all</button>
        </div>
    </body>
</html>